import React, { useState } from 'react';
import { FaBell, FaBullhorn, FaUser } from 'react-icons/fa6';

const Admin = () => {
  const [activeMenu, setActiveMenu] = useState(null);

  const primaryMenus = [
    { name: '问诊', subMenus: ['预约挂号', '初诊', '问诊', '会诊'] },
    { name: '药房', subMenus: ['待办', '备药中', '待领取', '完成', '库存', '出入库', '异常'] },
    { name: '财务', subMenus: ['问诊', '优惠券', 'VIP', '报表'] },
    { name: '运营管理', subMenus: ['项目售价', '公告', '穴位管理', '药品管理'] },
  ];

  return (
    <div className="min-h-screen bg-gray-100">
      {/* 顶部导航栏 */}
      <div className="bg-white shadow-md p-4 flex items-center justify-between">
        {/* 左上角 LOGO */}
        <div className="flex items-center">
          {/* <img
            src={require('../assets/logo/logo02.png')}
            alt="LOGO"
            className="absolute top-0 left-0 h-[1.666667rem] w-[1.666667rem]"
          /> */}
          <div className="text-xl font-bold text-blue-600">Barry Cloud</div>
        </div>

        {/* 中间一级菜单 */}
        <div className="flex space-x-8">
          {primaryMenus.map((menu) => (
            <button
              key={menu.name}
              className="text-gray-700 hover:text-blue-600 font-medium"
              onClick={() => setActiveMenu(activeMenu === menu.name ? null : menu.name)}
            >
              {menu.name}
            </button>
          ))}
        </div>

        {/* 右上角用户信息 */}
        <div className="flex items-center space-x-4">
          <FaBell className="text-gray-600 text-xl cursor-pointer" />
          <FaBullhorn className="text-gray-600 text-xl cursor-pointer" />
          <div className="flex items-center">
            <FaUser className="text-gray-600 text-2xl mr-2" />
            <span className="text-gray-700 font-medium">用户名</span>
          </div>
        </div>
      </div>

      {/* 二级菜单 */}
      {activeMenu && (
        <div className="bg-white shadow-sm p-4">
          <div className="flex space-x-6">
            {primaryMenus
              .find((menu) => menu.name === activeMenu)
              .subMenus.map((subMenu) => (
                <button
                  key={subMenu}
                  className="text-gray-600 hover:text-blue-500"
                >
                  {subMenu}
                </button>
              ))}
          </div>
        </div>
      )}

      {/* 主内容区 */}
      <div className="p-8">
        <div className="bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-bold text-gray-800 mb-4">欢迎使用管理后台</h2>
          <p className="text-gray-700">请从上方菜单选择功能模块。</p>
        </div>
      </div>
    </div>
  );
};

export default Admin;